<!doctype html>
<html>
    <head>

        <style>
            .c {
                width:250px; height:250px; border:1px solid cadetblue; position:absolute;background-color: mintcream;
            }

            #source {
                left:50px;
                top:50px;
            }

            #target {
                left:450px;
                top:70px;
            }

            #source2 {
                left:50px;
                top:450px;
            }

            .w {
                width:60px;height:60px;background-color: sienna;position:absolute;cursor:move;
                z-index:999;
            }

            .katavorio-ghost-proxy {
                opacity:0.8;
                outline:1px solid red;
                z-index:1000;
            }
        </style>
    </head>
    <body>

        <div id="source" class="c">
            <div class="w" style="left:20px;top:20px"></div>
        </div>

        <div id="target" class="c"></div>

        <div id="source2" class="c">
            <div class="w" style="left:20px;top:20px"></div>
        </div>

        <script src="../src/katavorio.js"></script>
        <script src="../src/default-katavorio-helper.js"></script>

        <script>
            var seh = new DefaultKatavorioHelper();
            var k = window.k = new Katavorio({
                getPosition:seh.getPosition,
                setPosition:seh.setPosition,
                getSize:seh.getSize,
                addClass:seh.addClass,
                removeClass:seh.removeClass,
                bind:seh.addEvent,
                unbind:seh.removeEvent,
                fireEvent:function() {
                    console.log(arguments);
                },
                intersects:seh.intersects,
                indexOf:seh.indexOf
            });

            k.draggable(source.querySelector(".w"), {
                constrain:true,
                ghostProxy:true,
                ghostProxyParent:document.body
            });

            k.droppable(target, {
                drop:function(p) {
                    var dl = target.offsetLeft - source.offsetLeft,
                        dt = target.offsetTop - source.offsetTop,
                        draggedElement = p.drag.getDragElement(true),
                        l = (draggedElement.offsetLeft - dl),
                        t = (draggedElement.offsetTop - dt);

                    draggedElement.style.left = l + "px";
                    draggedElement.style.top = t + "px";

                    target.appendChild(draggedElement);
                }
            });

            k.draggable(source2, {
                constrain:true,
                ghostProxy:true,
                selector:".w"
            });
        </script>
    </body>
</html>